<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base :: common_header(~{::title},~{::link})">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/admin-ui/css/app.css}" id="maincss"/>
</head>
<body>

<div id="cx-app" class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-sm-6">
                            <a class="mb-sm btn btn-primary">新增</a>
                        </div>
                        <div class="col-sm-6">
                            <a class="mb-sm btn btn-primary pull-right" v-on:click="getToken">注销</a>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <datatables-view v-bind:tableinfo="tableInfo"></datatables-view>
                </div>
            </div>
        </div>
    </div>

</div>

<th:block th:include="base ::commonScript"/>

<script type="application/javascript">
    (function(window, document, $, undefined){
        $(function () {
            var datatable = $('#datatable').dataTable({
//                l - 每页显示行数的控件
//                f - 检索条件的控件
//                t - 表格控件
//                i - 表信息总结的控件
//                p - 分页控件
//                r - 处理中的控件
                'dom': 'tilpr',
                'paging':   true,  // 是否显示分页
                'ordering': true,  // 是否列排序
                'info':     true,  // 是否在左下角显示列表信息
                'searching': false, //是否显示默认搜索
                "serverSide" : true,//是否服务器端分页、过滤数据
                "ajax": loadData,
                columns:[
                    {'title':'用户名','data':'username'},
                    {'title':'邮箱','data':'email'},
                    {'title':'创建人','data':'createBy'},
                    {'title':'创建时间','data':'createTime'},
                    {'title':'修改时间','data':'updateTime'}
                ],
                oLanguage: {
                    sSearch:      'Search all columns:',

                    sLengthMenu:  '每页记录 _MENU_ ',
                    info:         'Showing page _PAGE_ of _PAGES_',
                    zeroRecords:  'Nothing found - sorry',
                    infoEmpty:    'No records available',
                    infoFiltered: '(filtered from _MAX_ total records)'
                }
            }).api();

            function loadData(data, callback,settings) {
                console.log(data);
                $.ajax({
                    "url": "/as/userApi/page",
                    "type": "POST",
                    'data':data,
                    'dataType':"json",
                    'headers': {
                        'X-XSRF-TOKEN':$.cookie('XSRF-TOKEN')
                    },
                    'success':function (result) {
                        callback(result);
                    }
                });
            }
        });
    })(window, document, window.jQuery);


    var tableInfo = {
        columns:[
            {'name':'用户名','code':'username'},
            {'name':'邮箱','code':'email'},
            {'name':'创建人','code':'createBy'},
            {'name':'创建时间','code':'createTime'},
            {'name':'修改时间','code':'updateTime'}
        ],
        dataRow:[{}]
    };

    var vm = new Vue({
        el:'#cx-app',
        data:{
            'tableInfo':tableInfo,
            userInfo:{}
        },
        methods:{
            getUser:function () {
                console.log($.cookie('XSRF-TOKEN'));

                //var vue = this;
                $.ajax({
                    url:"/as/authorityApi/page",
                    type:'POST',
                    dataType:'json',
                    contentType:"application/json",
                    data:{"pageSize":"1","page":"2","draw":"5"},
                    success:function(result){

                        if (result){
                            console.log(result.data.data);
                            //vue.tableInfo.dataRow = result;
                        }
                    }
                });
            },

            getToken: function () {
                this.getUser();
                /*var params = {
                    scope: 'app',
                    username: '1hxl@163.com',
                    password: 'pwd',
                    grant_type: 'password'
                };
                $.ajax({
                    url: 'http://localhost:5555/uaa/oauth/token',
                    datatype: 'json',
                    type: 'post',
                    headers: {'Authorization': 'Basic dnMtYW5ndWxhcjpzZWNyZXQ='},
                    async: false,
                    data: params,
                    success: function (data) {
                        localStorage.setItem('token', data.access_token);
                        console.log(data);
                    },
                    error: function () {

                    }
                });*/
            }
        },
        mounted:function () {
            this.getUser();
        }
    });

</script>
</body>
</html>